<template>
    <div>
        <transition name="fade-left" appear>
            <div class="container" v-loading="loading">
                <div id="myChart"></div>
                <div id="myChart1"></div>
                <div id="myChart2"></div>
                <div id="myChart3"></div>
            </div>
        </transition>
    </div>
</template>

<script>
    //引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/grid');
    require('echarts/lib/component/legend');
    //引入折线图和饼图
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/pie');
    export default {
        data() {
            return {
                depname:[],
                loading: false,
                information:[],
                department:[],
                dep:[],
                salary:[],
                p:[],
                psvg:[],
                svg:[],
                xuelidata:[],
                dataman:[],
                datawoman:[]
            }
        },
        async mounted(){
             await   this.getAlldepartment();
             await   this.getAllinformation();
             await   this.getAllsalary();
             await   this.drawLine();
        },
        watch:{
            depname(val){//监听数据发生改变 刷新图表数据
                this.drawLine();
            }
        },
        methods: {      
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'));
                let myChart1 = echarts.init(document.getElementById('myChart1'));
                let myChart2 = echarts.init(document.getElementById('myChart2'));
                let myChart3 = echarts.init(document.getElementById('myChart3'));
                let legend=this.depname.map(item=>item);  
                // 绘制图表
                myChart.setOption({
                    title: { text: '各部门平均薪资柱形图',left: 'center' },
                    tooltip: {},
                    xAxis: {
                        data: legend
                    },
                    grid:{
                        height:210
                    },
                    legend: {
                        data: ['平均薪资'],
                        top: '7%',
                        left: 'center'
                    },
                    yAxis: {
                        type:'value'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                });
                myChart1.setOption({
                    title: {
                        text: '各部门男女趋势图',
                        left: 'center'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['男', '女'],
                        top: '10%'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: legend
                    },
                    yAxis: {
                        type: 'value'
                    },
                });
                myChart2.setOption({
                    title: {
                        text: '各部门人数饼状图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3','#e01f54'],
                });
                myChart3.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        text: '员工学历环形图',
                        left: 'center'
                    },
                    legend: {
                        top: '7%',
                        left: 'center'
                    },
                    color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                });
            },
            async getAlldepartment(){
                await this.$http.get("/api/getAlldepartment").then((response)=>{
                    if(response.data.length!=0){
                        for(var i=0;i<response.data.length;i++){
                        this.depname.push(response.data[i].dname);                  
                        }
                    }else{
                         this.$message.error('获取数据失败！');
                    }
                })
            },
            async getAllinformation(){
                await this.$http.get("/api/getAllinformation").then((response)=>{
                    if(response.data.length!=0){
                        let degree=[];
                        let degreen=[];
                        this.information=response.data;
                        //求有什么学历，每种学历多少人
                        let depn=this.depname;
                        for(var j=0;j<this.depname.length;j++){
                            let obj={
                                dname:this.depname[j],
                                childs:[]
                            }
                            this.department.push(obj);
                        }
                        for(var i=0;i<this.information.length;i++){
                            let degreename=this.information[i].idegree;
                            for(var j=0;j<degree.length;j++){
                                degreen.push(degree[j].degreename);
                            }
                            if(degreen.indexOf(degreename)!==-1){
                                let n=degreen.indexOf(degreename);
                                degree[n].childs.push(this.information[i]);
                            }else{
                                let obj={
                                    degreename:degreename,
                                    childs:[this.information[i]]
                                }
                                degree.push(obj);
                            }
                            if(depn.indexOf(this.information[i].idname)!==-1){
                                let n=depn.indexOf(this.information[i].idname);
                                this.department[n].childs.push(this.information[i]);
                            }
                        }
                        console.log('各部门人数',this.department);
                        //学历
                        for(var s=0;s<degree.length;s++){
                            let obj={
                                value:degree[s].childs.length,
                                name:degree[s].degreename
                            }
                            this.xuelidata.push(obj);
                        }
                        let option3={
                            series: [
                                {
                                    name: '学历人数',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: this.xuelidata
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart3')).setOption(option3);
                        for(var i=0;i<this.department.length;i++){
                            let man=0;
                            let woman=0;
                            for(var j=0;j<this.department[i].childs.length;j++){
                                if(this.department[i].childs[j].isex=="男"){
                                    man++;
                                }else if(this.department[i].childs[j].isex=="女"){
                                    woman++;
                                }
                            }
                            this.dataman.push(man);
                            this.datawoman.push(woman);
                        }
                        let option1={
                            series: [
                                {
                                    name: '男',
                                    type: 'line',
                                    stack: '人数',
                                    data: this.dataman
                                },
                                {
                                    name: '女',
                                    type: 'line',
                                    stack: '人数',
                                    data: this.datawoman
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart1')).setOption(option1);
                        for(var i=0;i<this.department.length;i++){
                            let obj={
                                value:this.department[i].childs.length,
                                name:this.department[i].dname
                            }
                            this.p.push(obj);
                        }                        
                        let option2={
                            series: [
                                {
                                    name: '总人数',
                                    type: 'pie',
                                    radius: '50%',
                                    data: this.p,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                        echarts.init(document.getElementById('myChart2')).setOption(option2);
                    }else{
                    this.$message.error('获取数据失败！');
                    }
                })
            },
            async getAllsalary(){
                await this.$http.get("/api/getAllsalary").then((response)=>{
                    if(response.data.length!=0){
                    let salary=response.data; 
                    let moneydata=[];
                    let dep=this.depname;
                    for(var i=0;i<this.depname.length;i++){
                        let obj={
                            dname:this.depname[i],
                            money:0
                        }
                        moneydata.push(obj);
                    }
                    for(var j=0;j<salary.length;j++){
                        if(dep.indexOf(salary[j].sdname)!==-1){
                            let n=dep.indexOf(salary[j].sdname);
                            moneydata[n].money=moneydata[n].money + parseInt(salary[j].ssalary);
                        }
                    }
                    for(var h=0;h<moneydata.length;h++){
                        moneydata[h].money=moneydata[h].money / this.department[h].childs.length;
                        this.svg.push(moneydata[h].money);
                    }
                    console.log('各部门钱数',moneydata);
                        let option={
                            series: [{
                                name: '平均薪资',
                                type: 'bar',
                                data: this.svg
                            }]
                        }
                        echarts.init(document.getElementById('myChart')).setOption(option);
                    }else{
                    this.$message.error('获取数据失败！');
                    }
                })
            },
        }
    }
</script>

<style scoped>
.container{
  text-align: center;
}
.container> div {
    width: 550px;
    height: 300px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.fade-left-enter-active{
    animation: fade-left .3s;
}
.fade-left-leave-active{
    animation: fade-left .3s reverse;
}
@keyframes fade-left{
    from{opacity: 0;transform: translateX(-100px);}
    to{opacity: 1;transform: translateX(0px);}
}
</style>
